<script setup lang="ts">
import { getTime } from '@/utils/time';
import { baseImgPath } from '@/utils/env';
import { useRouter } from 'vue-router';
import type { articleData } from "@/utils/interface";
import { highlightKeyword } from '@/utils/searchHighlight';

const props = defineProps({
    articleList: {
        type: Array<articleData>,
        default: () => []
    },
    searchTerm: {
    type: String,
    default: '',
  },
})
const router = useRouter();

const goToArticle = (id: number) => {
    router.push({
         name: 'articleDetail',
         params: { id }
    })
}
// 高亮处理函数
const getHighlightedText = (text: string, keyword: string) => {
    console.log(text, keyword);
    if (!keyword.trim()) return text;
    return highlightKeyword(text, keyword);
}


</script>

<template>
    <div v-for="(item, index) in props.articleList" :key="item.id"
        class="bg-gradient-to-br from-white to-gray-50 flex mb-5 lg:mb-10 overflow-hidden rounded-xl shadow-md hover:shadow-2xl duration-700 cursor-pointer group relative
        lg:w-[700px] lg:h-[300px] 
        md:w-[470px] md:h-[220px]
        sm:w-[300px] sm:h-[180px]" 
        @click="goToArticle(item.id)"
        :class="[
            index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'
        ]">
            <!-- 图片 -->
            <div class="w-1/2 h-full overflow-hidden">
                <img :src="`${baseImgPath}/${item.cover}`" alt="01"
                    class="shadow-xl/30 w-full h-full object-cover transition-all ease-in-out duration-800 hover:scale-110 rounded-lg" />
            </div>
            <!-- 内容 -->
            <div class="space-y-1.5 my-5 lg:my-4 px-5 lg:px-10 w-1/2" :class="[index % 2 === 0 ? 'text-right' : 'text-left']">
                <!-- 时间 -->
                <p class="text-gray-500 font-medium
                lg:text-base
                md:text-sm
                sm:text-xs">
                    发布于{{ getTime(item.created_at) }}
                </p>
                <!-- 标题 -->
                <h1 class="text-gray-800 group-hover:text-blue-600 transition-colors duration-300 font-bold leading-tight break-words hyphens-auto
                lg:text-2xl lg:line-clamp-2
                md:text-xl md:line-clamp-1
                sm:text-base sm:line-clamp-1" v-html="getHighlightedText(item.title, props.searchTerm)"></h1>
                <!-- 浏览评论 -->
                <div class="flex items-center cursor-pointer gap-1 text-gray-600" :class="[
                    'flex items-center',
                    index % 2 === 0 ? 'justify-end' : ''
                ]">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pinglun"></use>
                    </svg>
                    <p class="font-medium lg:text-base md:text-sm sm:text-xs">{{ item.comment }} 评论</p>
                </div>
                <!-- 简介 -->
                <p class="text-gray-700 leading-relaxed indent-6
                 lg:line-clamp-3 lg:text-base
                 md:line-clamp-2 md:text-sm
                 sm:hidden
                " v-html="getHighlightedText(item.introduce || '暂无简介', props.searchTerm)"> </p>
                <!-- 标签 -->
                <div class="flex flex-wrap gap-2" :class="[
                    'flex items-center',
                    index % 2 === 0 ? 'justify-end' : ''
                ]">
                    <div v-for="(tag, index) in item.label" :key="tag" :class="[
                        'inline-block px-2 py-1 rounded-full text-white font-medium transition-all duration-300 hover:scale-105',
                        'lg:text-sm md:text-xs sm:text-xs',
                        index % 3 === 0 ? 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-sm' :
                            index % 3 === 1 ? 'bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 shadow-sm' :
                                'bg-gradient-to-r from-rose-500 to-pink-500 hover:from-rose-600 hover:to-pink-600 shadow-sm'
                    ]">
                        {{ tag }}
                    </div>
                </div>
            </div>
        </div>
</template>

<style scoped>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.icon--large {
    width: 2em;
    height: 2em;
}

/* 卡片悬停效果 */
.group:hover {
    transform: translateY(-3px);
}

/* 标题字体优化 */
h1 {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* 时间和简介字体优化 */
p {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 标签字体优化 */
div[class*="rounded-full"] {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}



</style>
